<script lang="ts" setup>
import type { SopDocInfoModel } from '#/api/devOperation/sop/model/sopDocInfoModel';

import { nextTick, reactive, ref } from 'vue';

import { ColPage } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';

import { Button, Tooltip } from 'ant-design-vue';

import { SopOpenApi } from '#/api/basic/open/openApi';
import ApiSelect from '#/components/form/components/api-select.vue';
import { BasicTree } from '#/components/tree';

import Content from './modules/content.vue';

defineOptions({
  name: '开放文档',
  inheritAttrs: false,
});

const colPageProps = reactive({
  leftCollapsedWidth: 3,
  // 左侧最大宽度百分比
  leftMaxWidth: 50,
  // 左侧最小宽度百分比
  leftMinWidth: 10,
  // 左侧默认宽度
  leftWidth: 20,
  // 右侧默认宽度
  rightWidth: 80,
  // 左侧可折叠
  leftCollapsible: true,
  // 显示拖动手柄
  splitHandle: true,
  // 可拖动调整宽度
  resizable: true,
  // 显示拖动分隔线
  splitLine: true,
});

const treeRef = ref();
const contentRef = ref();

const docAppIdRef = ref<string>('');
const treeLoading = ref<boolean>(false);
const docTreeDataRef = ref<SopDocInfoModel.SopDocInfoResultVO[]>([]);

const loadDocTree = async (appId: string) => {
  try {
    treeLoading.value = true;
    const treeList = await SopOpenApi.findDocTree(appId);
    docTreeDataRef.value = treeList;
    await nextTick();
    await treeRef.value?.expandAll(true);
  } finally {
    treeLoading.value = false;
  }
};
const handleOptionsChange = async (options: any) => {
  if (options.length > 0) {
    docAppIdRef.value = options?.[0]?.id;
    await loadDocTree(options?.[0]?.id);
  }
};

const handleChange = async (value: any) => {
  await loadDocTree(value);
};

const handleSelect = (_, { node }: { node: any }) => {
  if (node.isFolder === 1) {
    return;
  }

  contentRef.value?.loadContent(node.id);
};
</script>

<template>
  <ColPage v-bind="colPageProps">
    <template #left="{ isCollapsed, expand }">
      <div v-if="isCollapsed" @click="expand">
        <Tooltip title="点击展开左侧">
          <Button shape="circle" type="primary">
            <template #icon>
              <IconifyIcon class="text-2xl" icon="bi:arrow-right" />
            </template>
          </Button>
        </Tooltip>
      </div>
      <div
        v-else
        class="border-border bg-card mr-2 h-full rounded-[var(--radius)] border p-2"
      >
        <ApiSelect
          v-model:value="docAppIdRef"
          :api="SopOpenApi.findAppList"
          value-field="id"
          label-field="appName"
          @options-change="handleOptionsChange"
          @change="handleChange"
        />
        <BasicTree
          ref="treeRef"
          :field-names="{ key: 'id', title: 'docTitle' }"
          :click-row-to-expand="false"
          :loading="treeLoading"
          :tree-data="docTreeDataRef"
          default-expand-all
          check-strictly
          highlight
          search
          toolbar
          @select="handleSelect"
        />
      </div>
    </template>
    <Content ref="contentRef" />
  </ColPage>
</template>
